iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 19
0
DevOps

從 0 到 1 的 DevOps 執行日記 - 全方位平台實踐手冊系列 第 19

【Day-19】我們是怎麼開始的?:一間傳統軟體公司從 0 開始建置的 DevOps 文化(實作篇)- 前端(1)

  • 分享至 

  • xImage
  •  

前言

通常前端的過程跟後端差不多,都是包裝成一個 Container 部署到 GKE 或者 Cloud Run

這邊分享一下思路,大致上就是將前端程式碼編譯打包後,掛載到網頁服務器上,然後包裝成 Image 部署上去。

這邊提供一個 Next.js 的範本供大家參考!

ARG NODE_VERSION=lts

FROM node:${NODE_VERSION}-alpine AS build

ENV ANALYZE=false

WORKDIR /app

#  add libraries; sudo so non-root user added downstream can get sudo
RUN apk add --no-cache \
    sudo \
    curl \
    build-base \
    g++ \
    libpng \
    libpng-dev \
    jpeg-dev \
    pango-dev \
    cairo-dev \
    giflib-dev \
    python \
    ;

#  add glibc and install canvas
RUN apk --no-cache add ca-certificates wget  && \
    wget -q -O /etc/apk/keys/sgerrand.rsa.pub https://alpine-pkgs.sgerrand.com/sgerrand.rsa.pub && \
    wget https://github.com/sgerrand/alpine-pkg-glibc/releases/download/2.29-r0/glibc-2.29-r0.apk && \
    apk add glibc-2.29-r0.apk

COPY . .
RUN rm -rf node_modules
ENV NPM_CONFIG_LOGLEVEL warn
RUN yarn install --frozen-lockfile && yarn build && rm -rf .next/cache

ENTRYPOINT [ "yarn" ]
CMD ["start:server"]

其中我們是使用 node Image 作為基底,加入相關依賴後,再透過 Next.js 框架功能執行!

因為是容器的關係,所以 Cloud Build 的設定檔其實一樣,如此一來就完成了前端的自動化!


上一篇
【Day-18】我們是怎麼開始的?:一間傳統軟體公司從 0 開始建置的 DevOps 文化(實作篇)- 後端(4)
下一篇
【Day-20】我們是怎麼開始的?:一間傳統軟體公司從 0 開始建置的 DevOps 文化(實作篇)- 實戰(1)
系列文
從 0 到 1 的 DevOps 執行日記 - 全方位平台實踐手冊30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言